import "./index.scss";
import devImg from "@public/images/decoration/power/center/dev.png";
import sjImg from "@public/images/decoration/power/center/sj.png";
import upsImg from "@public/images/decoration/power/center/ups.png";
import ktImg from "@public/images/decoration/power/center/kt.png";
import ywImg from "@public/images/decoration/power/center/yw.png";
import pdgImg from "@public/images/decoration/power/center/pdg.png";
import temperatureImg from "@public/images/decoration/power/center/temperature.png";
import { useMouseInElement } from "@vueuse/core";
export default defineComponent({
	props: [],
	emits: [],
	setup() {
		const prompt = reactive({
			normal: [
				{
					img: devImg,
					top: "69px",
					left: "614px",
					label: "发电机",
					status: "正常",
					show: false
				},
				{
					img: sjImg,
					top: "124px",
					left: "103px",
					label: "水浸",
					status: "正常",
					show: false
				},
				{
					img: upsImg,
					top: "15px",
					left: "243px",
					label: "UPS",
					status: "正常",
					show: false
				},
				{
					img: ktImg,
					top: "71px",
					left: "375px",
					label: "空调",
					status: "正常",
					show: false
				},
				{
					img: ywImg,
					top: "184px",
					left: "468px",
					label: "烟雾感应",
					status: "正常",
					show: false
				},
				{
					img: pdgImg,
					top: "127px",
					left: "514px",
					label: "配电柜",
					status: "正常",
					show: false
				}
			],
			warning: [
				{
					img: temperatureImg,
					top: "241px",
					left: "257px",
					label: "温湿度计",
					status: "告警"
				}
			]
		});

		return () => {
			return (
				<div class="topo">
					<div class="topo-bg">
						{prompt.normal.map(item => {
							return (
								<NormalTab
									style={{ top: item.top, left: item.left }}
									option={{ img: item.img, label: item.label, status: item.status, show: item.show }}
								/>
							);
						})}
						{prompt.warning.map(item => {
							return (
								<WarningTab
									style={{ top: item.top, left: item.left }}
									option={{ img: item.img, label: item.label, status: item.status }}
								/>
							);
						})}
					</div>
					<AlarmTab />
				</div>
			);
		};
	}
});
import alarmImg from "@public/images/decoration/power/center/alarm.png";
const AlarmTab = defineComponent({
	setup() {
		let showFlg = ref(true);
		const closeTab = () => {
			showFlg.value = false;
		};
		return () => (
			<>
				{showFlg.value ? (
					<div class="alarmTab">
						<div class="title">
							<img src={alarmImg} alt="" />
							<span>告警信息</span>
						</div>
						<div
							class="close"
							onClick={() => {
								closeTab();
							}}
						>
							X
						</div>
						<div class="content">
							<span>告警设备：温湿度计</span>
							<span>告警内容：温度越上线，值为38℃</span>
							<span>告警等级：一级</span>
							<span>发生时间：2023-04-13 11:12:56</span>
						</div>
					</div>
				) : (
					""
				)}
			</>
		);
	}
});

const NormalTab = defineComponent({
	props: {
		option: {
			type: Object
		}
	},
	setup(props) {
		let elRef = ref();

		let showRef = ref(props.option?.show);
		nextTick(() => {
			const { isOutside } = useMouseInElement(elRef.value);
			watch(
				() => isOutside.value,
				() => {
					showRef.value = !isOutside.value;
				}
			);
		});
		return () => (
			<div class="normalBox" ref={elRef}>
				<div class="normalTab" v-show={showRef.value}>
					<div class="tl">
						<img src={props.option?.img} alt="" />
						<span>{props.option?.label}</span>
						<p>{props.option?.status}</p>
					</div>
				</div>
			</div>
		);
	}
});

const WarningTab = defineComponent({
	props: {
		option: {
			type: Object
		}
	},
	setup(props) {
		return () => (
			<div class="warningTab">
				<div class="tl">
					<img src={props.option?.img} alt="" />
					<span>{props.option?.label}</span>
					<p>{props.option?.status}</p>
				</div>
			</div>
		);
	}
});
